<template>
	<el-form ref="form" :model="formData" :rules="formRules" class="personnel_info_wrapper">
		<h2 class="title">基本信息</h2>
		<el-row :gutter="32">
			<el-col :span="6">
				<el-form-item label="姓名" class="newline" prop="name">
					<el-input v-model="formData.name" placeholder="输入姓名"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="性别" class="newline" prop="sex">
					<el-radio-group v-model="formData.sex" :aria-hidden="false">
						<el-radio label="1">男</el-radio>
						<el-radio label="2">女</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="身份证号" class="newline" prop="idNo">
					<el-input v-model="formData.idNo" placeholder="输入身份证号"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="年龄" class="newline" prop="age">
					<template v-if="!!formData.age && formData.age > 0">
						<span class="text">{{ formData.age }}</span>
						<span class="unit">岁</span>
					</template>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="手机号码" class="newline" prop="phone">
					<el-input v-model="formData.phone" maxlength="11" placeholder="输入手机号码"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="最高学历" class="newline" prop="education">
					<el-select v-model="formData.education" placeholder="选择最高学历" style="width: 100%">
						<el-option label="本科" value="1"></el-option>
						<el-option label="研究生" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="身份类型" class="newline" prop="identityType">
					<el-select v-model="formData.identityType" placeholder="选择身份类型" style="width: 100%">
						<el-option label="事业人员" value="1"></el-option>
						<el-option label="职工" value="2"></el-option>
						<el-option label="在读研究生" value="3"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="职务" class="newline" prop="position">
					<el-input v-model="formData.position" placeholder="输入职务"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="职级" class="newline" prop="grades">
					<el-input v-model="formData.grades" placeholder="输入职级"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="职称" class="newline" prop="rankName">
					<el-input v-model="formData.rankName" placeholder="输入职称"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<h2 class="title">涉密信息</h2>
		<el-row :gutter="32">
			<el-col :span="6">
				<el-form-item label="人事号" class="newline" prop="personNo">
					<el-input v-model="formData.personNo" placeholder="输入人事号"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="用人形式" class="newline" prop="jobMode">
					<el-select v-model="formData.jobMode" placeholder="选择用人形式" style="width: 100%">
						<el-option label="在编" value="1"></el-option>
						<el-option label="聘用" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="单位/部门" class="newline" prop="depart">
					<el-input v-model="formData.depart" placeholder="输入单位/部门"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="上岗时间" class="newline" prop="period">
					<el-date-picker v-model="formData.period" type="date" placeholder="选择上岗时间" style="width: 100%"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="岗位名称" class="newline" prop="post">
					<el-input v-model="formData.post" placeholder="输入岗位名称"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="岗位确定依据" class="newline" prop="postBasis">
					<el-select v-model="formData.postBasis" placeholder="选择岗位确定依据" style="width: 100%">
						<el-option label="定性标准" value="1"></el-option>
						<el-option label="定量标准" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="涉密等级" class="newline" prop="level">
					<el-select v-model="formData.level" placeholder="选择涉密等级" style="width: 100%">
						<el-option label="一般" value="1"></el-option>
						<el-option label="重要" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="管理干部类型" class="newline" prop="leaderType">
					<el-select v-model="formData.leaderType" placeholder="选择管理干部类型" style="width: 100%">
						<el-option label="专职" value="1"></el-option>
						<el-option label="兼职" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="事项" class="newline" prop="matter">
					<el-input type="textarea" v-model="formData.matter" resize="none" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="输入事项"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<h2 class="title">人员记录</h2>
		<el-row :gutter="32">
			<el-col :span="24">
				<el-form-item label="是否到出入境登记备案" prop="field1">
					<el-switch v-model="formData.field1" active-value="1" inactive-value="2"></el-switch>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item prop="field2">
					<el-checkbox v-model="formData.field2">是否统一保管出入境证件</el-checkbox>
				</el-form-item>
			</el-col>
			<el-col :span="8" v-if="formData.field2">
				<el-form-item label="证件类型" label-width="110px" prop="papersType">
					<el-input v-model="formData.papersType" placeholder="输入证件类型"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="field3">
					<el-checkbox v-model="formData.field3">是否有等级变更</el-checkbox>
				</el-form-item>
			</el-col>
			<el-col :span="24" v-if="formData.field3">
				<el-form-item label="等级变更列表" class="newline" prop="gradeChanges">
					<grade-change-list v-model="formData.gradeChanges"></grade-change-list>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="field4">
					<el-checkbox v-model="formData.field4">是否参加年度考核</el-checkbox>
				</el-form-item>
			</el-col>
			<el-col :span="24" v-if="formData.field4">
				<el-form-item label="年度考核列表" class="newline" prop="annualCheck">
					<annual-check-list v-model="formData.annualCheck"></annual-check-list>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="field5">
					<el-checkbox v-model="formData.field5">是否复审</el-checkbox>
				</el-form-item>
			</el-col>
			<el-col :span="24" v-if="formData.field5">
				<el-form-item label="复审列表" class="newline" prop="reviews">
					<review-list v-model="formData.reviews"></review-list>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="field6">
					<el-checkbox v-model="formData.field6">是否有被追责情况</el-checkbox>
				</el-form-item>
			</el-col>
			<el-col :span="24" v-if="formData.field6">
				<el-form-item label="追责列表" class="newline" prop="accountabilitys">
					<accountability-list v-model="formData.accountabilitys"></accountability-list>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="field7">
					<el-checkbox v-model="formData.field7">是否有因私出国(境)审批</el-checkbox>
				</el-form-item>
			</el-col>
			<el-col :span="24" v-if="formData.field7">
				<el-form-item label="追责列表" class="newline" prop="accountabilitys">
					<accountability-list v-model="formData.accountabilitys"></accountability-list>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="field8">
					<el-checkbox v-model="formData.field8">是否报送月度补贴</el-checkbox>
				</el-form-item>
			</el-col>
		</el-row>
		<el-button type="primary" @click="handleSubmitForm()">确定</el-button>
	</el-form>
</template>

<script>
import moment from 'moment';
import reviewList from './reviewList';
import gradeChangeList from './gradeChangeList';
import annualCheckList from './annualCheckList';
import accountabilityList from './accountabilityList';
const reg = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
export default {
	components: { gradeChangeList, annualCheckList, reviewList, accountabilityList },
	data() {
		const checkIdNo = (rule, value, callback) => {
			if (reg.test(value) === false) {
				callback(new Error('请输入正确的身份证号码'));
			} else {
				callback();
			}
		};
		return {
			formData: {},
			formRules: {
				name: { required: true, message: '请填写姓名', trigger: 'blur' },
				sex: { required: true, message: '请选择性别', trigger: 'change' },
				idNo: [
					{ required: true, message: '请输入身份证号', trigger: 'blur' },
					{ validator: checkIdNo, trigger: 'blur' }
				],
				personNo: { required: true, message: '请填写人事号', trigger: 'blur' },
				jobMode: { required: true, message: '请选择用人形式', trigger: 'change' },
				papersType: { required: true, message: '请选择证件类型', trigger: 'change' },
				depart: { required: true, message: '请填写站点名称', trigger: 'blur' },
				post: { required: true, message: '请填写站点名称', trigger: 'blur' },
				level: { required: true, message: '请选择涉密等级', trigger: 'change' },
				postBasis: { required: true, message: '请填写站点名称', trigger: 'blur' },
				matter: { required: true, message: '请填写站点名称', trigger: 'blur' },
				leaderType: { required: true, message: '请选择管理干部类型', trigger: 'change' },
				identityType: { required: true, message: '请选择身份类型', trigger: 'change' },
				education: { required: true, message: '请选择最高学历', trigger: 'change' },
				position: { required: true, message: '请填写职务', trigger: 'blur' },
				grades: { required: true, message: '请填写职级', trigger: 'blur' },
				rankName: { required: true, message: '请填写职称', trigger: 'blur' },
				phone: [
					{ required: true, message: '请填写手机号码', trigger: 'blur' },
					{ pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: '手机号码格式不正确', trigger: 'blur' }
				],
				period: { required: true, message: '请选择上岗时间', trigger: 'change' },

				reviews: { required: true, message: '请填写复审数据', trigger: 'change' },

				field1: { required: true, message: '请选择身份类型', trigger: 'change' },
				field2: { required: true, message: '请选择身份类型', trigger: 'change' },
				field3: { required: true, message: '请选择身份类型', trigger: 'change' },
				field4: { required: true, message: '请选择身份类型', trigger: 'change' },
				field5: { required: true, message: '请选择身份类型', trigger: 'change' },
				field6: { required: true, message: '请选择身份类型', trigger: 'change' },
				field7: { required: true, message: '请选择身份类型', trigger: 'change' },
				field8: { required: true, message: '请选择身份类型', trigger: 'change' },
				field9: { required: true, message: '请选择身份类型', trigger: 'change' },
				field10: { required: true, message: '请选择身份类型', trigger: 'change' },
				field11: { required: true, message: '请选择身份类型', trigger: 'change' },
				field12: { required: true, message: '请选择身份类型', trigger: 'change' },
				field13: { required: true, message: '请选择身份类型', trigger: 'change' }
			}
		};
	},
	watch: {
		'formData.idNo': {
			handler(val) {
				if (!!reg.test(val)) {
					let birthDate = moment(val.substring(6, 14), 'YYYYMMDD');
					this.$set(this.formData, 'age', moment().diff(birthDate, 'years'));
				}
			}
		},
		'formData.level': {
			handler(val) {
				console.log(val);
			}
		}
	},
	methods: {
		handleSubmitForm() {
			this.$refs['form'].validate((valid) => {
				console.log(valid);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.personnel_info_wrapper::v-deep {
	width: 992px;
	padding: 16px 16px 0;
	margin: 0 auto;
	h2.title {
		color: #606266;
		font-size: 20px;
		padding: 10px 0;
		margin-bottom: 24px;
		border-bottom: solid 1px #606266;
	}
	.el-form-item__label {
		font-size: 16px;
	}
	.el-form-item.newline {
		.el-form-item__label {
			display: block;
			float: none;
			text-align: left;
			line-height: 1;
			margin-bottom: 12px;
		}
	}
	.el-form-item__content {
		display: flex;
		align-items: center;
		min-height: 40px;
		span.text,
		span.unit {
			font-size: 16px;
			color: #606266;
		}
		span.unit {
			margin-left: 10px;
		}
	}
	.el-input__inner,
	.el-textarea__inner {
		font-size: 16px;
		&::-webkit-scrollbar-track {
			border-radius: 0;
			background-color: rgba(0, 0, 0, 0.1);
		}
		&::-webkit-scrollbar {
			-webkit-appearance: none;
			width: 6px;
			height: 6px;
		}
		&::-webkit-scrollbar-thumb {
			cursor: pointer;
			border-radius: 2px;
			transition: color 0.2s ease;
			background-color: rgba(0, 0, 0, 0.15);
		}
	}
	.el-radio__label {
		font-size: 16px;
	}
	.el-radio__inner {
		width: 16px;
		height: 16px;
		&::after {
			width: 6px;
			height: 6px;
		}
	}
	.el-checkbox__inner {
		width: 18px;
		height: 18px;
		&::after {
			width: 4px;
			height: 10px;
			left: 5px;
			border-width: 2px;
		}
	}
	.el-checkbox__label {
		font-size: 16px;
	}

	.el-table__cell {
		line-height: 1;
	}
}
</style>
